<template>
  <div>
    <div class="allGoods">
      <ul class="list">
        <li class="item" v-for="(good ,index) in pindanList" :key=index>
          <div class="top" @click="goPin(index)">
            <div class="pic left"><img :src=good.mallImg alt=""></div>
            <div class="right">
              <span class="goodsName">{{good.mallName}}</span>
              <!--<p class="goodsPrice">-->
                <!--<span class="gray">已进货： {{good.goodsNum}}件</span>-->
              <!--</p>-->
              <p class="red">&yen {{good.salePrice / 100}}</p>
              <p>
                <span class="jdp">京东价: {{good.jdPrice}}</span>
              </p>
            </div>
          </div>
          <div class="bottom">
            <div class="bottom-left">
              <p class="goodsTime">还差{{good.goodsNum}}件，
                <Countdown :gpEndTime="Date.parse(new Date(good.gpEndTime)).toString()" endText="已经结束了"></Countdown>
              </p>
            </div>
            <div class="more">
              <!--<a href="javascript:;" @click="updateCount(index)">-->
              <!--更多-->
              <!--</a>-->
              <button class="btn2" @click="pinDan(index)" value="邀请拼单">邀请拼单</button>

              <!--<div class="operation_order" v-show="curId===index?isShow:false">-->
              <!--&lt;!&ndash;<p class="cancel">取消订单</p>&ndash;&gt;-->
              <!--<p class="delete" @click="del(index)">删除商品</p>-->
              <!--</div>-->
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>

</template>
<script>
  //  import {Loadmore} from 'mint-ui';
  export default {
    props: [
      'pindanList',
      'creator'
    ],
    data: function () {
      return {
        curId: 0,
        isShow: false,
      }
    },
//    components: {
//      'load-more':Loadmore  // 为组件起别名，vue转换template标签时不会区分大小写，例如：loadMore这种标签转换完就会变成loadmore，容易出现一些匹配问题
//      // 推荐应用组件时用a-b形式起名
//    },
    created(){
//      this.fn10020();//初次访问查询列表
    },

    methods: {
      updateCount: function (index) {
        if (this.curId === index) {
          this.isShow = !this.isShow
        } else {
          this.curId = index;
        }
      },
//      删除店铺商品
//      del:function (index) {
//        this.pindanList.splice(index,1)
//      },
      pinDan (index) {
//        alert(this.creator)
        window.localStorage.gpId = this.pindanList[index].gpId;
        window.localStorage.msId = this.pindanList[index].msId;
        window.localStorage.mallId = this.pindanList[index].mallId;
        this.$router.push({
          name: 'fxpdDetails',
          query: {
            shopId: window.localStorage.shopId,
            msId:window.localStorage.msId,
            gpId: JSON.parse(window.localStorage.gpId),
            creator: this.creator,
            shopType: 1
          }
        })

      },
      // 去详情页
//      goDetail(mallId){
//        this.$router.push({name:'detail',
//          params:{
//            userId:JSON.parse(window.localStorage.data).id,
//            mallId:mallId,
//            tokenId:token()
//          }
//        })
//      }
      goPin (index) {
        window.localStorage.msId = this.pindanList[index].msId;
        window.localStorage.gpId = this.pindanList[index].gpId;
        console.log(JSON.parse(window.localStorage.msId));
        this.$router.push({
          path: '/pindetail',
          query: {
            shopId: window.localStorage.shopId,
            msId: window.localStorage.msId,
            gpId: window.localStorage.gpId,
            shopType: 1
          }
        });
      }
    }
  }
</script>
<style lang="scss">

  .allGoods ul {
    display: flex;
    flex-flow: row wrap;
    /*width: 100%;*/
  }

  .allGoods li {
    background: #ffffff;
    width: 100%;
    height: 370px;
    margin-bottom: 20px;
  }

  .allGoods li .top {
    height: 276px;
    /*width: 100%;*/
    border-bottom: 1px solid #f4f4f4;
    box-sizing: border-box;
    padding: 26px 20px 30px 30px;
  }

  .allGoods li .top .left {
    width: 220px;
    height: 220px;
    float: left;
  }

  .allGoods li .top .left img {
    width: 220px;
    height: 220px;
    /*margin: 25px 0 0 30px;*/
  }

  .allGoods li .top .right {
    font-size: 26px;
    /*margin-top: 25px;*/
    width: 340px; /*让文本自动换行，自适应*/
    margin-left: 28px;
    float: left;
  }

  .allGoods li .top .right > .goodsName {
    color: #3b3b43;
    /*只显示两行文字*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .allGoods li .top .right .goodsPrice {
    margin: 20px 0 22px;
  }

  .allGoods li .top .right .goodsPrice .gray {
    font-size: 16px;
    /*text-align: center;*/
    color: #bdbdbd;
  }

  .allGoods li .top .right .red {
    font-size: 24px;
    color: #fe3519;
    margin: 30px 0;
  }

  .allGoods li .top .right .jdp {
    font-size: 16px;
    color: #bdbdbd;
  }

  .allGoods li .top .right .goodsTime {
    font-size: 25px;
  }

  .allGoods li .bottom {
    /*float: right;*/
    width: 100%;
    height: 92px;
    .bottom-left {
      float: left;
      padding: 30px 0 30px 30px;
      vertical-align: middle;
      p {
        float: left;
        width: 320px;
        height: 25px;
        font-size: 24px;
        color: #3b3b43;
      }
      /*a {*/
      /*float: right;*/
      /*width: 66px;*/
      /*height: 25px;*/
      /*font-size: 20px;*/
      /*color: #a1a1a1;*/
      /*text-align: center;*/
      /*}*/
    }
    .more {
      float: right;
      width: 200px;
      height: 64px;
      vertical-align: middle;
      /*>a{*/
      /*!*width: 66px;*!*/
      /*!*height: 25px;*!*/
      /*display: inline-block;*/
      /*height: 64px;*/
      /*font-size: 20px;*/
      /*color: #a1a1a1;*/
      /*text-align: center;*/
      /*line-height: 64px;*/
      /*vertical-align: bottom;*/
      /*box-sizing: border-box;*/
      /*!*padding-top: 8px;*!*/
      /*}*/
      > button {
        float: right;
        width: 178px;
        height: 64px;
        margin: 15px 20px 0 15px;
        border: none;
        outline: none;
        border-radius: 30px;
        /*background: none;*/
        background: url("../assets/images/shops/btn_pindan@1x.png") no-repeat;
        background-size: cover;
        color: #fff;
        font-size: 24px;
        vertical-align: middle;
      }
    }
  }
</style>
